<script setup lang="ts">
import { ref } from "vue";
import type {
  MaterialUploadParams,
  UserListResponse,
  BatchUpdateMaterialsParams
} from "@/api/material";
import { updateMaterials, uploadMaterial } from "@/api/material";
import { ElMessage, UploadFile } from "element-plus";

const props = defineProps<{
  visible: boolean;

  directorOptions: UserListResponse["list"];
  editorOptions: UserListResponse["list"];
  selectedItemIds: number[];
}>();

const emit = defineEmits<{
  (e: "update:visible", value: boolean): void;
  (e: "success"): void;
}>();

const formRef = ref();
const loading = ref(false);

const form = ref<BatchUpdateMaterialsParams>({
  ids: [],
  director: "",
  editor: ""
});

const rules = {
  director: [{ required: true, message: "请选择编导", trigger: "change" }],
  editor: [{ required: true, message: "请选择剪辑师", trigger: "change" }]
};

const handleClose = () => {
  emit("update:visible", false);
  formRef.value?.resetFields();
};

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        loading.value = true;
        const params: BatchUpdateMaterialsParams = {
          ...form.value,
          ids: props.selectedItemIds
        };
        await updateMaterials(params);
        ElMessage.success("更新成功");
        handleClose();
        emit("success");
      } catch (error) {
        console.error("更新失败:", error);
        ElMessage.error("更新失败");
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<template>
  <el-dialog
    title="上传素材"
    :model-value="visible"
    @update:model-value="val => emit('update:visible', val)"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item prop="director" label="编导">
        <el-select
          v-model="form.director"
          placeholder="请选择编导"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in props.directorOptions"
            :key="item.accountId"
            :label="item.nickName"
            :value="item.accountId"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="editor" label="剪辑">
        <el-select
          v-model="form.editor"
          placeholder="请选择剪辑"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in props.editorOptions"
            :key="item.accountId"
            :label="item.nickName"
            :value="item.accountId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.upload-demo {
  width: 100%;
}
</style>
